<template>
    <div class="smartWarningDetail">
        <a-modal width="90%" :visible="visible" title="详情" class="yuan-modal smartWarningDetail-modal" @cancel="modalCancel"
            :dialog-style="{ top: '20px' }">
            <a-spin tip="Loading..." :spinning="formLoading">
                <div>
                    <div class="page-top">
                        <span style="margin-right:20px" class="page-title">{{parentInfo.name}}</span>
                        <span style="margin-right:20px"
                            v-if="parentInfo.materialType==='配方颗粒'">产品大类：{{parentInfo.inventoryType}}</span>
                        <span style="margin-right:20px"
                            v-if="parentInfo.materialType!=='辅料'">标准：{{parentInfo.standard}}</span>
                        <span style="margin-right:20px" v-if="parentInfo.materialType==='配方颗粒'">规格：{{parentInfo.spec}}</span>
                    </div>
                    <div class="stock-panel" v-if="parentInfo.materialType==='配方颗粒' || parentInfo.materialType==='配方颗粒(颗粒)'">
                        <span style="margin-right:20px"
                            v-if="parentInfo.materialType==='配方颗粒'">成品库存量：{{parentInfo.stockNum}}袋</span>
                        <span style="margin-right:20px"
                            v-if="parentInfo.materialType==='配方颗粒'">计划包装量：{{parentInfo.planNum}}袋</span>
                        <span style="margin-right:20px" v-if="parentInfo.materialType==='配方颗粒'">差量：<span
                                class="c-danger">{{parentInfo.differenceNum}}袋</span></span>
                        <span style="margin-right:20px">可供销售天数：{{parentInfo.availableSellDay}}天</span>
                    </div>
                </div>
                <PlanDetailVue v-if="visible" :parentInfo="parentInfo" />
            </a-spin>
            <template slot="footer">
                <a-button @click="modalCancel">
                    关闭
                </a-button>
            </template>
        </a-modal>
    </div>
</template>

<script lang="ts">
import { Vue, Component, Prop, Watch } from "vue-property-decorator";
import PlanDetailVue from "./planDetial.vue";

@Component({ name: "TPL", components: { PlanDetailVue } })
export default class index extends Vue {
    @Prop({ default: "" }) visible!: boolean;
    @Prop({ default: {} }) parentInfo!: any;
    @Watch("visible")
    visibleChange() {
        if (this.visible) {
        }
    }
    formLoading = false;
    closeModal() {
        this.$emit("closeModal");
    }
    modalCancel() {
        this.closeModal();
    }
    modalOk() {}
}
</script>

<style lang="scss">
.smartWarningDetail-modal {
    .page-top {
        padding-bottom: 20px;
        border-bottom: solid 1px #eee;
    }
    .page-title {
        font-weight: bold;
        font-size: 20px;
    }
    .stock-panel {
        font-size: 16px;
        color: #333;
        padding: 20px 0;
        border-bottom: solid 1px #eee;
        margin-bottom: 20px;
    }
}
</style>
